<template>
  <div class="container">
    <div class="chart">
      <div class="div1 title"><span>6个</span>重大风险</div>
      <div class="div2 title"><span>6个</span>较大风险</div>
      <div class="div3 title"><span>6个</span>中等风险</div>
      <div class="div4 title"><span>6个</span>较小风险</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RightItem4',
  components: {},
  data() {
    return {
      option: {
        grid: {
          top: '40',
          left: '40',
          right: '10',
          bottom: '30'
        },
        legend: {
          selectedMode: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tar = params[1]
            return tar.name + '<br/> ' + tar.seriesName + ' : ' + tar.data
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          name: '单位：个'
        },
        series: [
          {
            name: '#1机组',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: '#2机组',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  justify-content: right;
  .chart {
    width: 100%;
    height: 100%;
    background: url('@/assets/website/7747.png') no-repeat;
    background-size: 100%;
    margin-top: 50px;
    .div1 {
      position: relative;
      left: 20px;
      top: 10px;
    }
    .div2 {
      position: relative;
      left: 95px;
      top: -75px;
    }
    .div3 {
      position: relative;
      left: 185px;
      top: -70px;
    }
    .div4 {
      position: relative;
      left: 280px;
      top: -100px;
    }
  }
  .title {
    width: 50px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    span {
      font-size: 12px;
    }
  }
}
</style>
